import { loginAPI } from "@/api/user";
import { setToken, getToken, removeToken } from "@/utils/auth";
import store from "..";
export default {
  // 开启命名空间，让父仓库可以使用子仓库的state
  namespaced: true,
  // 模块内的state写函数形式最好
  state() {
    return {
      // getToken()方法在刷新后执行，从cookie中获取token，其余时间从vuex中
      token: getToken() || "",
      userDetails: {
        userName: "",
        roleName: "",
      },
    };
  },
  mutations: {
    setToken(state, newToken) {
      state.token = newToken;
      setToken(newToken); // 这里使用cookie存储
    },
    removeToken(state) {
      // 清空state中的数据
      state.token = "";
      // 移除cookie中的token
      removeToken();
      // 清空姓名和角色名
    },
    setUserDetail(state, res) {
      state.userDetails.userName = res.name;
      state.userDetails.roleName = res.roleName;
    },
  },
  actions: {
    async loginAction(context, data) {
      console.log(context);
      const res = await loginAPI(data);
      store.commit("user/setToken", res.data.token);
    },
  },
};

// 使用的语法：如何在组件中使用子模块的各个数据和方法
//1.使用state中的数据
//this.$store.state.user.xxx 直接使用 使用场景：组件中只有少数使用了数据
//辅助函数：
// import {mapState} from 'vuex';
// 使用computed：{...mapState("user",["xxx","yyy"])}
// 使用场景：组件中多处使用数据

// 2.使用getters中的数据
// this.$store.getters['user/getters方法名'] 直接使用 使用场景：组件中只有少数使用
// 辅助函数：
// import {mapGetters} from 'vuex';
// computed：{...mapGetters("user",["xxx","yyy"])}

//3.使用mutations的方法
// this.$store.commit('user/方法名'，参数)  参数只能传递一个，若想传递多个，需要把参数写到对象里
// 辅助方法
// import {mapMutations} from 'vuex';
// methods：{...mapMutations("user",["方法名"])}

// 4.使用actions的方法
// this.$store.dispatch('user/方法名',参数) 参数只能传递一个，若想传递多个，需要把参数写到对象里
// 辅助方法
// import {mapActions} from 'vuex';
// methods：{...mapActions("user",["方法名"])}
